<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Parsley, the ultimate frontend javascript form validation library">
    <meta name="author" content="Guillaume Potier">

    <title>Parsley - The ultimate JavaScript form validation library</title>

    <!-- Bootstrap core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="doc/assets/docs.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style>
      body {
        padding: 0px;
      }
      .jumbotron h1 strong {
        color: #FF851B;
      }
      .jumbotron h1 em {
        font-style: normal;
        font-weight: bolder;
      }
      .jumbotron p em {
        font-weight: bolder;
      }
      .jumbotron {
        padding-top: 30px;
        padding-bottom: 10px;
      }
      .btn-go, .btn-go:hover {
        color: white;
        font-weight: bold;
        text-shadow: #2ECC00 1px 2px 2px;
        background: #2ECC40;
      }
      .btn-go:hover {
        background: #FF851B;
        text-shadow: #FF851B 1px 2px 2px;
      }
      /* Link styles (used on .masthead-links as well) */
      .jumbotron a {
        -webkit-transition: all .2s ease-in-out;
           -moz-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
      }
      .row h2 {
        color: #FF851B;
      }
      .row p {
        text-align: justify;
      }
      .argument {
          line-height: 1.6em;
        min-height: 80px;
      }
      .argument.shorter {
        min-height: 70px;
      }
      .version {
        font-size: 0.6em;
        color: #949494;
      }
      #parsley2 {
        color: white;
        font-weight: bolder;
        background: orange;
        position:fixed;
        top:0;
        width: 100%;
        padding: 10px;
      }
      #parsley2 a {
        color: white !important;
        text-decoration: underline;
      }
      .container-narrow {
        margin-top: 100px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="masthead">
          <h3 class="text-muted"><a href="#">Parsley</a></h3>

        <ul class="nav nav-justified">
          <li class="active"><a href="#">首页</a></li>
          <li><a href="doc/examples.html">示例</a></li>
          <li><a href="doc/index.html">文档</a></li>
          <li><a href="doc/download.html">下载</a></li>
          <li><a href="doc/help.html">帮助</a></li>
          <li><a href="doc/annotated-source/main.html">源码</a></li>
          <li><a href="doc/tests.html">测试</a></li>
          <li><a href="doc/about.html">关于</a></li>
        </ul>
      </div>

      <!-- Jumbotron -->
      <div class="jumbotron">
        <h1><em>Parsley</em>, the <strong>ultimate</strong> JavaScript <strong>form validation</strong> library</h1>
        <p class="lead">前端验证表单从未如此的<em>强大</em>、<em>容易</em>.</p>
        <p><a class="btn btn-lg btn-go" href="doc/index.html" role="button">Get started today</a></p>
        <p class="version"><i class="icon glyphicon glyphicon-tag"></i>&nbsp;<span class="parsley-version">v2.6.0</span></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">

        <div class="col-lg-4">
          <h2>直观的 DOM API</h2>
          <p class="argument">像任何其他形式的验证库, 简单的用英语 <strong>在html标签内写你的需求</strong>, Parsley 将会让你早一点下班! <strong>简单的表单验证写一行代码就搞定了！</strong></p>
          <p><a href="doc/examples.html">查看示例 &raquo;</a></p>
       </div>
        <div class="col-lg-4">
          <h2>动态表单验证</h2>
          <p class="argument">Parsley 现在更聪明，它会自动检测您的表单的修改，并相应地进行验证。简单地添加，删除或编辑字段，Parsley 都可以支持！!</p>
          <p><a href="doc/examples.html">查看示例 &raquo;</a></p>
        </div>
        <div class="col-lg-4">
          <h2>多种内置的验证器</h2>
          <p class="argument">Parsley <strong>自带了十多种有用的验证器。</strong>. 如果还不够, 使用由社区提供的 <strong>Parsley 其他优秀的 Ajax 验证器</strong>或其他扩展验证器. </p>
          <p><a href="doc/index.html#validators">查看详情 &raquo;</a></p>
        </div>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="col-lg-4">
          <h2>关注用户体验</h2>
          <p class="argument shorter">Parsley  强烈的专注于<abbr title="user interface">#UI</abbr> 和 <abbr title="user experience">#UX</abbr>. 覆盖大多数Parsley的默认行为来满足您的确切需求.</p>
          <p><a href="doc/index.html#ui">查看文档 &raquo;</a></p>
        </div>
        <div class="col-lg-4">
          <h2>超级可靠</h2>
          <p class="argument shorter"><em>几乎没有bug</em>. 在IE7以上浏览器，Parsley 已经得到<strong>强有力的验证</strong>.</strong></p>
          <p><a href="doc/tests.html">查看测试 &raquo;</a></p>
        </div>
        <div class="col-lg-4">
          <h2>免费</h2>
          <p class="argument shorter">Parsley 是一个 <strong>开源, MIT 认证</strong>,被开发出来方大家的框架. 它会将<strong>免费进行到底.</strong> <a href="https://github.com/guillaumepotier/Parsley.js">在 Github 上加入我们!</a></p>
          <p><a href="https://raw.githubusercontent.com/guillaumepotier/Parsley.js/master/LICENSE">查看证书 &raquo;</a></p>
        </div>

      </div>

      <!-- Site footer -->
      <div class="footer">
        <p>&copy; <a href="https://twitter.com/guillaumepotier" title="Guillaume Potier on Twitter">Guillaume Potier</a> 2014 - <a href="http://wisembly.com">@Wisembly</a></p>
      </div>

    </div> <!-- /container -->

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-37229467-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </body>
</html>
